<template>
  <div>
      <!-- 表格 -->
    <el-table
      :data="banners"
      border
      fit
      highlight-current-row>

      <el-table-column
        label="序号"
        align="center">
        <template slot-scope="scope">
          {{ (current - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column prop="title" label="banner名称" />


      <el-table-column prop="gmtModified" label="添加时间" />

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <router-link :to="'/edu/teacher/edit/'+scope.row.id">
            <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
          </router-link>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      :current-page="current"
      :page-size="pageSize"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getBanners"
    />
  </div>
</template>

<script>
import banner from "../../../api/edu/banner";
export default {
    data(){
       return{
           banners:[], //查询之后接口返回集合
            current:1, //当前页
            pageSize:8, //每页记录数
            total:0, //总记录数
       }
    },
    created(){
        this.getBanners()
    },
    methods:{
       getBanners(current = 1){
           this.current = current
           banner.getBanners(this.current,this.pageSize).then(res=>{
               this.banners = res.data.items
               this.total = res.data.total
           })
       },
       removeDataById(id){
             this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          banner.delete(id).then(res=>{
              this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getBanners()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
       }
       
    }
}
</script>

<style scoped>
/* .image{
    height: 300px;
    width:400px;
} */
</style>